<template>
  <div>
    <NuxtLink :to="`./list/details/${item.news_id}`" v-for="(item, index) in newList" :key="index">
      <div class="flex items-center mt-3 lg:mt-6 min-h-24 border-b-2 border-gray-200 pb-3 lg:pb-6">
        <div class="aspect-[4/3] min-h-full min-w-32 max-w-32 lg:max-w-64">
          <img class="w-full h-full object-cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="" />
        </div>
        <div class="py-1 px-3 lg:px-4 2xl:pl-6">
          <h3 class="text-lg font-bold text-gray-900">{{ item.title }}</h3>
          <p class="text-neutral-500 flex items-center my-1 lg:my-2">
            <i class="size-4">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                <path fill="currentColor" d="M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768m0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896"></path>
                <path fill="currentColor" d="M480 256a32 32 0 0 1 32 32v256a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32"></path>
                <path fill="currentColor" d="M480 512h256q32 0 32 32t-32 32H480q-32 0-32-32t32-32"></path>
              </svg>
            </i>
            <span class="ml-2">{{ item.create_time }}</span>
          </p>
          <p class="text-sm text-gray-500 leading-7 line-clamp-1 lg:line-clamp-2 xl:line-clamp-3 2xl:line-clamp-4">
            {{ item.content }}
          </p>
        </div>
      </div>
    </NuxtLink>
  </div>
</template>

<script setup>
const { data: result } = await useFetch("/api/news/newList");
const newList = ref(result.value.data);
newList.value?.forEach((item) => (item.content = item.content.replace(/<[^>]+>/g, "")));
</script>
<style scoped lang="scss"></style>
